<script setup name="note">
import { ref, watch } from 'vue'
import { marker } from '@/utils/marker.js'
import Mark from '@/utils/mark.js'
import { useNoteValueStore, useNotePageStore } from '@/stores'

let notePageStore = useNotePageStore()
let noteValueStore = useNoteValueStore()

let mark = new Mark()

// 实际上传数据
let noteText = ref('')
let note = ref('') // 渲染

// 标题数据
let title = ref([])

// 监听父组件是否要删除父级文件夹
watch(
  () => notePageStore.upIsOk,
  () => {
    // 清空
    noteText.value = ''
    note.value = ''
    title.value = []
  }
)

// 监听父级文件夹名的改变，也要相应触发
watch(
  () => notePageStore.fatherFiled,
  () => {
    // 重新渲染笔记页面
    delayedInput()
  }
)

// 渲染器
let flag = null
function delayedInput() {
  // 节流阀
  clearTimeout(flag)
  flag = setTimeout(() => {
    noteValueStore.setNote(noteText.value)
    // note的渲染内容(要传入父级文件夹名)
    note.value = mark.dealWith(
      marker(noteValueStore.note),
      notePageStore.fatherFiled
    )
    // 标题
    title.value = mark.completeBody(note.value)
  }, 700)
}
</script>

<template>
  <!-- 笔记输入区 -->
  <div class="noteInputArea">
    <!-- 笔记区 -->
    <div class="write-right">
      <textarea
        class="note-textarea scrollBarDiv"
        placeholder="请输入笔记..."
        v-model="noteText"
        @input="delayedInput"
        v-focus
      ></textarea>
    </div>
    <!-- 视图 -->
    <div class="heiddren-left scrollBarDiv">
      <div v-html="note" v-if="note"></div>
      <div v-else class="left-box">
        <SvgIcon href="#icon-note-shuxie1"></SvgIcon>
      </div>
    </div>
    <!-- 略缩图 -->
    <div class="sketch noneScroll">
      <div
        v-for="item in title"
        :key="item.title"
        :class="`abc-title abc-${item.level}`"
      >
        <a :href="'#' + item.id">{{ item.title }}</a>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.noteInputArea {
  display: flex;
  min-width: 1110px;
  // 左侧
  .write-right {
    width: 45vw;
    height: 86vh;
    border-right: 1px solid #dedbdb;
    textarea {
      width: 100%;
      height: 100%;
      padding-left: 1px;
      border: 0px;
      line-height: 2;
      border-right: 1px solid #dedbdb;
    }
  }

  // 右侧
  .heiddren-left {
    width: 45vw;
    height: 86vh;
    flex: 1;
    overflow-y: scroll;
    overflow-x: hidden;
    border-right: 1px solid #dedbdb;
    scroll-behavior: smooth;

    .left-box {
      width: 100%;
      height: 86vh;
      line-height: 86vh;
      text-align: center;
      font-size: 44px;
      color: #d0cccc;
    }
  }

  // 略缩图效果，用缩放，把左侧所有代码同步一份到略缩图
  .sketch {
    width: 10vw;
    height: 86vh;
    overflow: hidden;
    overflow-y: scroll;
    overflow-x: hidden;
  }
}
</style>
